import React, { useEffect, useState } from 'react'
import { Input, Modal } from 'antd'

function Form(props) {
  const [value, setValue] = useState(props.project.name)

  function close() {
    props.onCancel()
    setValue('')
  }

  function save() {
    props.onSave({ ...props.project, name: value })
  }

  useEffect(() => {
    if (props.visible) {
      setValue(props.project.name)
    } else {
      close()
    }
  }, [props.visible])

  return (
    <Modal title={'编辑项目'} onCancel={close} open={props.visible} onOk={save}>
      输入项目名称：
      <Input onChange={(e) => {
        setValue(e.target.value)
      }} value={value}></Input>
    </Modal>
  )
}

export default Form
